<template>
  <div class="musiclist-page">
    <div v-for="(music, i) in allmusic" v-bind:key="music['music_id']" class="musiclist-music-item">
      <div>{{i+1}}</div>
      <div>{{music['music_name']}}</div>
      <div>{{music['music_up']}}</div>
      <div>{{music['music_bv']}}</div>
      <div>{{music['music_release_time']}}</div>
      <img class="musiclist-music-item-image" :src="playImage" v-on:click="_handleNewMusic(music)"/>
    </div>
  </div>
</template>

<script>
import playImage from '../assets/fold/play.png'
var electron = ''
if (window.require) {
  electron = window.require('electron')
}

export default {
  name: 'MusicList',
  props: ['allmusic'],
  data () {
    return {
      playImage: playImage
    }
  },
  methods: {
    _handleNewMusic (musicInfo) {
      electron.ipcRenderer.send('change-new-music', musicInfo)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.musiclist-page {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.musiclist-music-item {
  width: 100%;
  height: 30px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2%;
}
.musiclist-music-item-image {
  height: 30px;
  width: auto;
}
</style>
